<!--  -->
<template>
  <div class='queue-page'>
    <van-sticky>
      <c-title text="扫码排队" :hide="false" ></c-title>
      <van-search v-model="query.search.store_name" placeholder="请输入门店名称"  shape="round"  show-action @search="onSearch" >
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>
    </van-sticky>
    <div class="queue-list" v-if="queueListArr.length > 0">
      <block v-for="(item,index) in queueListArr" :key="index">
        <div class="queue-item" @click="homesellerTo(item)">
          <div class="head flex flex-j-sb">
            <div class="time">{{item.created_at}}</div>
            <div class="status" :class="item.status_name == '已过号'?'on':''">{{item.status_name}}</div>
          </div>
          <div class="queue-content flex">
            <van-image
              width="4rem"
              height="4rem"
              :src="item.store.thumb"
              radius="10px"
            />
            <div class="wrap">
              <div class="shop-name">{{item.store && item.store.store_name}}</div>
              <div class="queue-number">排队号码：<span>{{item.queue_sn}}</span></div>
              <div class="await">等待时间：<span>{{item.wait_date}}</span></div>
            </div>
          </div>
        </div>
      </block>
    </div>
    <van-empty description="暂无数据"  v-else/>
    <div class="mb-100"></div>
    <div  class="account-btn"  :style="iPnoneBottomBol ? 'padding-bottom: 34px;' : ''">
        <!--var(--themeBaseColor)-->
        <van-button round block type="info"  color="var(--themeBaseColor)" @click.stop="applyCode" >扫一扫</van-button>
      </div>
  </div>
</template>

<script>
import queueList_controller from "./queueList_controller";
export default queueList_controller;
</script>
<style lang="scss" scoped>
   .pcStyle   .account-btn {
    width:375px;
    left:50%;
    transform: translate(-50%, 0);
  }
  .mb-100 {
    height: 6.25rem;
    clear: both;
  }
  .account-btn {
    width:100%;
    background-color: #fff;
    position: fixed;
    left:0;
    bottom:0;
    padding:10px 12px;
  }
/* @import url(); 引入公共css类 */
  .queue-list {
    margin:0.9375rem;
    .queue-item {
      padding:0.8125rem 0.6875rem;
      border-radius: 0.5rem;
      background-color: #fff;
      margin-bottom: 0.625rem;
      .head {
        color: #00001C;
        padding:0 0 0.625rem 0;
        .time {
          font-size: 0.8125rem;
        }
        .status {
          font-size: 0.875rem;
        }
        .on {
          color: var(--themeBaseColor);
        }
      }
      .queue-content {
        .wrap {
          padding:0rem 0 0 0.5rem;
          text-align: left;
          color: #00001C;
          .shop-name {
            padding:0 0 0.5rem 0;
            font-weight: 500;
            font-size: 1rem;
            line-height: 1rem;
            
          }
          .queue-number {
            font-size: 0.9375rem;
            padding:0 0 0.25rem 0;
            span {
              color: var(--themeBaseColor);
            }
          }
          .await {
            font-size: 0.8125rem;
            color: #00001C;
            span {
              color: var(--themeBaseColor);
            }
          }
        }
      }
      
    }
  }
</style>